import React, { PropTypes, Component } from 'react'
import CptList from './CptList'

class Menu extends Component {
 constructor(props, context) {
    super(props, context)
    this.state={
      cptListVisible:false,
      displayMenu:true
    }
  }
  showCpts(){
    this.setState({
      cptListVisible:!this.state.cptListVisible
    })
  }
  showMenu(){
     this.setState({
      displayMenu:!this.state.displayMenu
    })
  }
  render() {
    let {components}=this.props
    return (
      <div>
         <div className="menu"
              style={{left:this.state.displayMenu?0:-200}}
                >
              }
            <div className="menu-wrap">
                <div className="menu-close"
                      onClick={this.showMenu.bind(this)}
                      >
                  >>
                </div>
              <div className="logo">
                myStrikingly
              </div>
              <div className="menu-btn-group">
                <div className="menu-btn solid-gray btn-undo"><i className="fa fa-reply"></i>撤回</div>
                <div className="menu-btn solid-gray btn-redo"><i className="fa fa-share"></i>重做</div>
                <div className="menu-btn solid-gray btn-set"><i className="fa fa-cog"></i>设置</div>
                <div className="menu-btn solid-gray btn-pub"><i className="fa fa-external-link"></i>生成</div>
              </div>
              <div className="menu-cpts">
                <div className="cpts-tit">
                  <span>组件</span> 
                </div>

               { components.map((cpt)=>{
                  return (
                      <div className="cpt-item" key={cpt.id}>
                          <i className="fa fa-navicon"></i><span>{cpt.cptName}</span> 
                      </div>
                    )
                })}
                
                
                <div className="cpt-add"
                    onClick={this.showCpts.bind(this)}
                    >
                   <i className="fa fa-plus"></i><span> 添加新组件</span>
                </div>
              </div>
             
            </div>
          </div>
          <CptList cptListVisible={this.state.cptListVisible} />
      </div>
     
    )
  }
}

Menu.propTypes = {
  
}

export default Menu
